<!DOCTYPE html>
<html lang="en">
<head>
    <!--    Author 谢川东 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>good</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>
<body>
<!--需要使用表格加载数据-->
<div class="demoTable">
    用户ID：
    <div class="layui-inline">
        <input class="layui-input" name="userId" id="userId" autocomplete="off">
    </div>
    车牌号：
    <div class="layui-inline">
        <input class="layui-input" name="plate" id="plate" autocomplete="off">
    </div>
    <button type="button" class="layui-btn layui-btn-radius" data-type="reload" id="search">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="good"></table>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/html" id="bar">
    <button type="button" class="layui-btn layui-btn-radius layui-btn-sm" data-type="reload" id="outstock">出库</button>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-md" lay-event="chuku">出库</a>

</script>
<script>
    layui.use('table', function () {
        var table = layui.table
        var $ = layui.jquery
        //执行一个 table 实例
        var tableIns = table.render({
            elem: '#demo',
            height: 450,
            url: '/tingche/toll/selectAll',
            title: '车库表',
            limit: 5,
            loading: 'true',
            page: true,//开启分页
            toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            totalRow: false, //开启合计行
            //表头
            cols: [
                [{
                    fixed: 'left',
                    type: 'checkbox'
                },
                    {
                        field: 'rk_id',
                        title: '入库序号',
                        sort: true
                    },
                    {
                        field: 'user_id',
                        title: '用户ID',
                        sort: true
                    },
                    {
                        field: 'rk_plate',
                        title: '车牌号',
                    },
                    {
                        field: 'rk_time',
                        title: '入库时间',
                        templet: '<div>{{ layui.util.toDateString(d.rk_time, "yyyy-MM-dd HH:mm:ss") }}</div>',
                        sort: true
                    },
                    {
                        field: 'out_stock',
                        title: '操作',
                        toolbar: "#barDemo"
                    },
                ]
            ]
        });

        //监听头工具栏事件
        table.on('toolbar(good)', function (obj) {
            //获取选中的行  复选框   数据    功能按钮
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data; //获取选中的数据
            // 获取到了需要操作的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('执行一个入操作');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('执行编辑功能');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('执行删除功能');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }

        });

        //监听行工具事件
        table.on('tool(good)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'chuku') {
                console.log(data)
                $.get('/tingche/toll/carout?rid=' + data.rk_id, function (data) {
                    layer.msg(data.msg);
                    setTimeout(obj.del(), 500)
                })

            }
        });

        //实现条件查询，并且刷新表格
        $("#search").on('click', function () {
            //向后台发送请求并且刷新表格
            tableIns.reload({
                url: '/tingche/toll/selectByIDorPlate',
                where: {
                    //设定异步数据接口的额外参数，任意设
                    'userId': $("#userId").val(),
                    'plate': $("#plate").val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

        })

    })
</script>
</body>
</html>